<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box {
        width: 600px;
        height: 500px;
        margin: 0 auto;
    }
    </style>
    <script src="./echarts.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        let box = document.querySelector('#box');
        let chart = echarts.init(box);
        chart.setOption({
            title: {
                text: '人口比例',
                subtext: '2017年度',
            },
            legend: [{
                    data: ['男', '女'],
                    right: '0px',
                    top: '10%',
                    orient: 'vertical'
                },{
                    data: ['30岁以下', '31至60岁', '60岁以上'],
                    right: '50%',
                    top: '10%',
                    orient: 'vertical'
                }
            ],
            series: [
                {
                    name: '性别比例',
                    type: 'pie',
                    radius: '40%',
                    center: ['75%', '50%'],
                    data: [
                        {
                            name: '男',
                            value: '2000'
                        },
                        {
                            name: '女',
                            value: '3000'
                        }
                    ]
                },
                {
                    name: '年龄比例',
                    type: 'pie',
                    radius: '40%',
                    center: ['30%', '50%'],
                    data: [
                        {
                            name: '30岁以下',
                            value: '2000'
                        },
                        {
                            name: '31至60岁',
                            value: '3000'
                        },
                        {
                            name: '60岁以上',
                            value: '800'
                        }
                    ]
                }
            ]

        });
    </script>
</body>
</html>
